---
title: Tooltip
description: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="demo-components-radix-tooltip" />

## Installation

<ComponentInstallation name="components-radix-tooltip" />

## Usage

```tsx
<Tooltip>
  <TooltipTrigger>Open tooltip</TooltipTrigger>
  <TooltipContent>
    <p>Tooltip content</p>
  </TooltipContent>
</Tooltip>
```

## API Reference

### Tooltip

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/components/radix/tooltip#tooltip"
  text="Animate UI API Reference - Tooltip Component"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/tooltip#root"
  text="Radix UI API Reference - Tooltip.Root"
/>
</div>

<TypeTable
  type={{
    delayDuration: {
      description:
        'Override the duration given to the `Provider` to customise the open delay for a specific tooltip.',
      type: 'number',
      required: false,
      default: '0',
    },
  }}
/>

### TooltipTrigger

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/components/radix/tooltip#tooltiptrigger"
  text="Animate UI API Reference - TooltipTrigger Component"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/tooltip#trigger"
  text="Radix UI API Reference - Tooltip.Trigger"
/>
</div>

### TooltipContent

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/components/radix/tooltip#tooltipcontent"
  text="Animate UI API Reference - TooltipContent Component"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/tooltip#content"
  text="Radix UI API Reference - Tooltip.Content"
/>
</div>

<TypeTable
  type={{
    transition: {
      description: 'The transition of the tooltip content.',
      type: 'Transition',
      required: false,
      default: "{ type: 'spring', stiffness: 300, damping: 25 }",
    },
    '...props': {
      description: 'The props of the tooltip content.',
      type: 'HTMLMotionProps<"div">',
      required: false,
    },
  }}
/>

<Callout type="info">
  The `forceMount` and `asChild` properties are not supported in the
  `TooltipContent` component, as it is used for animation.
</Callout>

## Credits

- [Radix UI Tooltip](https://www.radix-ui.com/primitives/docs/components/tooltip)
- Credit to [shadcn/ui](https://ui.shadcn.com/docs/components/tooltip) for style inspiration.
